// import type { Directive } from "vue";

// const scrollFade: Directive = {
//   mounted(el: HTMLElement) {
//     // 图片从左滑入，其他元素从下方滑入
//     const isImg = el.tagName.toLowerCase() === "img";

//     el.style.opacity = "0";
//     el.style.transform = isImg ? "translateX(-50px)" : "translateY(40px)";
//     el.style.transition = "opacity 5s ease, transform 3s ease"; // ⏱ 延长到 n 秒

//     const observer = new IntersectionObserver(
//       ([entry]) => {
//         if (entry.isIntersecting) {
//           el.style.opacity = "1";
//           el.style.transform = "translateX(0)";
//           if (!isImg) el.style.transform = "translateY(0)";
//           observer.unobserve(el);
//         }
//       },
//       { threshold: 0.1 }
//     );

//     observer.observe(el);
//     (el as any)._fadeObserver = observer;
//   },
//   unmounted(el: any) {
//     el._fadeObserver?.disconnect();
//   }
// };

// export default scrollFade;

import type { Directive } from "vue";

const scrollFade: Directive = {
  mounted(el: HTMLElement, binding) {
    const direction = binding.value || "bottom"; // 默认方向为 bottom
    const transformMap: Record<string, string> = {
      left: "translateX(-50px)",
      right: "translateX(50px)",
      top: "translateY(-50px)",
      bottom: "translateY(50px)"
    };

    // 初始样式
    el.style.opacity = "0";
    el.style.transform = transformMap[direction] || transformMap.bottom;
    el.style.transition = "opacity 1.5s ease, transform 1.5s ease";

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          el.style.opacity = "1";
          el.style.transform = "translate(0, 0)";
          observer.unobserve(el);
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(el);
    (el as any)._fadeObserver = observer;
  },
  unmounted(el: any) {
    el._fadeObserver?.disconnect();
  }
};

export default scrollFade;
